import React, { useState } from 'react';
import { Modal, Form, Input, Button, message } from 'antd';
import { UserOutlined, IdcardOutlined } from '@ant-design/icons';
import { useTranslation } from 'react-i18next';
import api from '@/api';
import type { CreateHolderForm } from '@/types/holder';

/**
 * 创建持卡人模态框组件属性接口
 * 定义组件接收的props类型
 */
interface CreateCardHolderProps {
  visible: boolean; // 模态框是否可见
  onCancel: () => void; // 取消回调函数
  onSuccess: () => void; // 成功回调函数
}

/**
 * API响应接口
 * 定义API返回数据的通用结构
 */
interface ApiResponse<T = unknown> {
  code: number; // 状态码
  message: string; // 消息
  data?: T; // 可选的数据字段
}

/**
 * 创建持卡人组件
 * 用于创建新的卡片持有人的模态框表单
 * @param props 组件属性
 * @returns React组件
 */
const CreateCardHolder: React.FC<CreateCardHolderProps> = ({
  visible,
  onCancel,
  onSuccess
}) => {
  const [form] = Form.useForm(); // Ant Design表单实例
  const [loading, setLoading] = useState(false); // 加载状态
  const { t } = useTranslation(); // 国际化翻译函数

  /**
   * 处理表单提交
   * @param values 表单数据，符合CreateHolderForm类型
   */
  const handleSubmit = async (values: CreateHolderForm) => {
    setLoading(true); // 开始加载
    try {
      // 调用API创建持卡人
      const response = await api.post('api/cards', values, {
        params: {
          _action: 'createCardHolder' // 指定操作类型
        }
      }) as ApiResponse;
      
      if (response.code === 200) {
        message.success(t('cardHolder.createSuccess')); // 成功提示
        form.resetFields(); // 重置表单字段
        onSuccess(); // 调用成功回调
        onCancel(); // 关闭模态框
      } else {
        message.error(response.message || t('cardHolder.createFailed')); // 错误提示
      }
    } catch (error: unknown) {
      console.error('Create card holder error:', error);
      // 类型安全的错误消息提取
      const errorMessage = (error as { response?: { data?: { message?: string } } })?.response?.data?.message;
      message.error(errorMessage || t('cardHolder.createFailed')); // 显示错误消息
    } finally {
      setLoading(false); // 结束加载
    }
  };

  return (
    <Modal
      title={t('cardHolder.createTitle')} // 模态框标题，使用国际化
      open={visible} // 控制模态框显示
      onCancel={onCancel} // 取消回调
      footer={null} // 不显示默认底部按钮
      width={500} // 模态框宽度
    >
      {/* Ant Design表单组件 */}
      <Form
        form={form} // 绑定表单实例
        layout="vertical" // 垂直布局
        onFinish={handleSubmit} // 提交处理函数
        autoComplete="off" // 禁用自动完成
      >
        {/* 姓名输入字段 */}
        <Form.Item
          name="name" // 字段名
          label={t('cardHolder.name')} // 标签，使用国际化
          rules={[
            { required: true, message: t('cardHolder.nameRequired') } // 必填验证规则
          ]}
        >
          <Input
            prefix={<UserOutlined />} // 前缀图标
            placeholder={t('cardHolder.namePlaceholder')} // 占位符，使用国际化
          />
        </Form.Item>

        {/* 身份证号输入字段 */}
        <Form.Item
          name="idCard" // 字段名
          label={t('cardHolder.idCard')} // 标签
          rules={[
            { required: true, message: t('cardHolder.idCardRequired') }, // 必填验证
            { pattern: /^\d{17}[\dXx]$/, message: t('cardHolder.idCardInvalid') } // 正则验证身份证格式
          ]}
        >
          <Input
            prefix={<IdcardOutlined />} // 前缀图标
            placeholder={t('cardHolder.idCardPlaceholder')} // 占位符
          />
        </Form.Item>

        {/* 手机号输入字段 */}
        <Form.Item
          name="phone" // 字段名
          label={t('cardHolder.phone')} // 标签
          rules={[
            { pattern: /^1[3-9]\d{9}$/, message: t('cardHolder.phoneInvalid') } // 正则验证手机号格式
          ]}
        >
          <Input placeholder={t('cardHolder.phonePlaceholder')} /> {/* 占位符 */}
        </Form.Item>

        {/* 邮箱输入字段 */}
        <Form.Item
          name="email" // 字段名
          label={t('cardHolder.email')} // 标签
          rules={[
            { type: 'email', message: t('cardHolder.emailInvalid') } // 邮箱格式验证
          ]}
        >
          <Input placeholder={t('cardHolder.emailPlaceholder')} /> {/* 占位符 */}
        </Form.Item>

        {/* 提交按钮 */}
        <Form.Item>
          <Button
            type="primary" // 主按钮样式
            htmlType="submit" // 提交类型
            loading={loading} // 加载状态
            block // 块级按钮
          >
            {t('common.submit')} {/* 按钮文字，使用国际化 */}
          </Button>
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default CreateCardHolder; // 导出组件